<template>
	<view class="container">
		<uni-forms ref="baseForm"  :rules="rules" :modelValue="baseFormData" class="uni-forms">
			<uni-forms-item label="邮箱"  name="email">
				<uni-easyinput v-model="baseFormData.email" placeholder="请输入邮箱" disabled="true" />
			</uni-forms-item>
			<uni-forms-item label="昵称" required name="nickName">
				<uni-easyinput v-model="baseFormData.nickName" placeholder="请输入昵称" />
			</uni-forms-item>
			<uni-forms-item label="头像" required  name="avatar">
				<uni-file-picker limit="1" :del-icon="false" disable-preview 
				:imageStyles="imageStyles"
				@select="select" 
				v-model="baseFormData.avatar"
				file-mediatype="image">
					<uni-icons type="upload"></uni-icons>
				</uni-file-picker>
			</uni-forms-item>
			<uni-forms-item label="性别" required   name="sex">
				<view class="sex" >
					<uni-data-checkbox v-model="baseFormData.sex" :localdata="sexs"></uni-data-checkbox>
				</view>
			</uni-forms-item>
			<uni-forms-item label="简介"  name="introduction">
				<uni-easyinput type="textarea" v-model="baseFormData.introduction" placeholder="请输入简介" />
			</uni-forms-item>
		</uni-forms>
		<view class="button-group">
			<button type="primary" size="mini" @click="edit(baseForm)">保存</button>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

	const baseFormData =ref(
	{
		email: '',
		nickName: '',
		introduction: '',
		sex: 1,
		avatar: '',
	}) 
	const sexs=ref([
		{
			text:'女',
			value:0
		},
		{
			text:'男',
			value:1
		}
	])
	const imageStyles = ref({
				width: 64,
				height: 64,
				border: {
					radius: '50%'
				}
			})
	const select=(e)=>{
		console.log('选择文件：',e)
	}
	const baseForm=ref()
	const rules = ref(
	{
		nickName: {
			rules: [{
				required: true,
				errorMessage: '昵称不能为空'
			}]
		},
		avatar: {
			rules: [{
				required: true,
				errorMessage: '头像不能为空'
			}]
		},
		sex: {
			rules: [{
				required: true,
				errorMessage: '性别不能为空'
			}]
		}
	})
    const edit=(ref)=>{
		ref.validate().then((res)=>{
			
		}).catch(err =>{
			console.log('err', err);
		})
	}
</script>

<style  lang="scss">
	.button-group {
		margin-top: 8%;
		text-align: center;
	}
	.uni-forms{
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10%;
	}
	.sex{
		height: 100%;
		display: flex;
		align-items: center;
	}
	.sexradio{
		padding-right: 10%;
		font-size: 13px;
	}
</style>